Skip to content

fix: duplicate Navbar in dev (Turbopack)#73

Merged
fityannugroho merged 1 commit intomainfrom
fix-not-found-page
Aug 25, 2025
Merged

fix: duplicate Navbar in dev (Turbopack)#73
fityannugroho merged 1 commit intomainfrom
fix-not-found-page

Conversation

@fityannugroho
Copy link
Owner

@fityannugroho fityannugroho commented Aug 25, 2025

Summary

This PR scopes the app's Not Found page to the (main) route group to avoid rendering two Navbar components during development with Turbopack.

What changed

  • Added app/(main)/not-found.tsx — a group-scoped Not Found page that does not render the Navbar.
  • Removed app/not-found.tsx — the previous global Not Found which rendered Navbar and caused duplication when a route under (main) returned a not-found.

Why

  • Next App Router composes layouts in a tree (root → group (main) → page). When a route under (main) returns Not Found, the layout tree still includes app/(main)/layout.tsx (which renders Navbar). The global app/not-found.tsx also rendered Navbar, resulting in two navbars being mounted.
  • This was especially visible during development with Turbopack because Turbopack's more granular HMR and streaming rendering can expose transient or state-preserving mounts that Webpack's dev server often hid. The actual production behavior was unaffected, but the dev UX was confusing.

Verification

  • Reproduced locally with next dev --turbo before the change: navigating to a missing route under (main) showed two Navbar instances.
  • After the change, the duplicate Navbar no longer appears for not-found routes under the (main) group.

Files changed

  • A app/(main)/not-found.tsx — new group-scoped Not Found page
  • D app/not-found.tsx — removed global Not Found that included Navbar

Notes & follow-ups

  • Alternatives considered:

    • Move Navbar to app/layout.tsx (root) if you want the navbar on every route globally.
    • Keep a global app/not-found.tsx but ensure it doesn't render Navbar (same effect).
    • Create per-group not-found pages for different visual treatments per area.
  • This change is low-risk and only affects the Not Found fallback behavior in dev; production rendering remains consistent.

… (Turbopack)

- Added not-found.tsx — group-scoped not-found that does not render Navbar.
- Removed not-found.tsx (global not-found) to avoid double rendering.
@fityannugroho fityannugroho added the bug Something isn't working label Aug 25, 2025
@fityannugroho fityannugroho changed the title fix(not-found): scope not-found to (main) group to avoid duplicate Navbar in dev (Turbopack) fix: duplicate Navbar in dev (Turbopack) Aug 25, 2025
@fityannugroho fityannugroho merged commit f660c83 into main Aug 25, 2025
8 of 9 checks passed
@fityannugroho fityannugroho deleted the fix-not-found-page branch August 25, 2025 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant